<transition :name="toggleTransition" @enter="onViewEntered">
    <div class="cly-vue-formdialog" tabindex="0" v-show="isOpened" v-click-outside="onClickOutside" @keydown.esc="escKeyEvent" ref="rootEl" :class="rootClasses">
        <div class="cly-vue-formdialog__header bu-p-4">
            <h3 class="color-cool-gray-100">{{title}}</h3>
        </div>
        <div class="cly-vue-formdialog__steps-container bu-px-4 bg-warm-gray-10" v-scroll-shadow :class="{'is-multi-step':isMultiStep}">
            <div class="bu-columns bu-is-gapless bu-is-mobile">
                <div class="bu-column bu-is-12">
                    <slot name="default"
                        v-bind="passedScope">
                    </slot>
                </div>
            </div>
        </div>
        <div class="cly-vue-formdialog__footer bu-p-4">
            <div class="cly-vue-formdialog__controls-left-pc">
                <slot name="controls-left"
                    v-bind="passedScope">
                </slot>
            </div>
            <div class="cly-vue-formdialog__buttons is-multi-step bu-is-justify-content-flex-end bu-is-flex" v-if="isMultiStep">
                <el-button @click="doClose" type="secondary" size="small" v-if="hasCancelButton && currentStepIndex === 0" :disabled="isSubmitPending">{{cancelButtonLabel}}</el-button>
                <el-button @click="prevStep" type="secondary" size="small" v-if="currentStepIndex > 0" :disabled="isSubmitPending">{{i18n('common.drawer.previous-step')}}</el-button>
                <el-button @click="nextStep" size="small" type="success" v-if="!isLastStep" :class="{'is-disabled':!isCurrentStepValid}" :disabled="isSubmitPending">{{i18n('common.drawer.next-step')}}</el-button>
                <el-button @click="submit" :loading="isSubmitPending" size="small" v-if="isLastStep" :class="{'is-disabled':!isSubmissionAllowed}" type="success" :disabled="isSubmitPending">{{saveButtonLabel}}</el-button>
            </div>
            <div class="cly-vue-formdialog__buttons is-single-step bu-is-justify-content-flex-end bu-is-flex" v-if="!isMultiStep">
                <el-button @click="doClose" type="secondary" size="small" v-if="hasCancelButton" :disabled="isSubmitPending">{{cancelButtonLabel}}</el-button>
                <el-button @click="submit" :loading="isSubmitPending" size="small" type="success" :class="{'is-disabled':!isSubmissionAllowed}" :disabled="isSubmitPending">{{saveButtonLabel}}</el-button>
            </div>
        </div>
    </div>
</transition>
